import React, { useState, useEffect } from 'react';
import { Divider, Button, Row, Col, Upload } from 'antd';
import { PlusOutlined, LoadingOutlined } from '@ant-design/icons';
import { getMallDecorate, uploadMallDecorate } from '@/services/mall/api';
import { MsgType, showMsg, replaceImgHost } from '@/utils/utils';
import { miniPro } from '@/utils/constants';
// @ts-ignore
import Cookies from 'js-cookie';
import PermissionControl from '@/components/PermissionControl';

const DecorateInfo: React.FC = () => {
  const [disabled, setDisabled] = useState<boolean>(true);
  const [decorateInfo, setDecorateInfo] = useState<MALLAPI.DecorateInfo>({} as MALLAPI.DecorateInfo);
  const [fileList, setFileList] = useState<any>([]);
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState<string>('');
  const [url1, setUrl1] = useState('');

  const onPublish = async () => {
    try {
      await uploadMallDecorate({
        decorate_url: url1
      })
      showMsg('已生效', MsgType.SUCCESS);
      setDisabled(true)
    } catch (error) {
      showMsg(error?.data?.errmsg);
    }
  }

  const fetchDecorateInfo = async () => {
    try {
      const info: MALLAPI.DecorateInfo = await getMallDecorate();
      info.decorate_url = replaceImgHost(info.decorate_url);
      setDecorateInfo(info);
      setFileList([
        {
          url: info.decorate_url
        }
      ]);
      setImageUrl(info.decorate_url);
    } catch (error) {
      showMsg(error?.data?.errmsg);
    }
  }

  useEffect(() => {
    fetchDecorateInfo();
  }, []);

  // @ts-ignore
  const onChange = ({file, fileList}) => {
    if (file.status === 'uploading') {
      setLoading(true);
      setFileList(fileList);
    } else if (file.status === 'done') {
      setLoading(false);
      setFileList([
        {
          url: replaceImgHost(miniPro + file.response[0].file_web_url)
        }
      ])
      setImageUrl(replaceImgHost(miniPro + file.response[0].file_web_url));
      setUrl1(miniPro + file.response[0].file_web_url);
    } else if (file.status === 'error') {
      setLoading(false);
      showMsg('文件上传失败');
    }
  }

  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
    </div>
  );
  return <div className="decorate-info">
     <div className="header">
       <div className="title">3.商城装饰</div>
       <div className="btns">
          <PermissionControl action_id="500500007">
            <Button style={{marginRight: 10}} onClick={() => setDisabled(false)} type="primary">编辑</Button>
          </PermissionControl>
          <PermissionControl action_id="500500008">
            <Button type="primary" disabled={disabled} onClick={onPublish}>发布</Button>
          </PermissionControl>
      </div>
     </div>
    <Divider style={{margin: '10px 0'}} />
    <div className="info-body">
      <Row className="row">
        <Col>
          <Upload
          disabled={disabled}
          name="file"
          fileList={fileList}
          listType="picture-card"
          onChange={onChange}
          headers={{
            'Oper-Token': localStorage.getItem('Oper-Token')
          }}
          action="/api/common/file/batch/upload"
          showUploadList={false}>
          { imageUrl ? <img src={imageUrl} style={{ width: '100%' }} /> : uploadButton }
        </Upload>

        <div style={{textAlign: 'center', fontSize: 12}}>
          {!disabled && <>点击更换商城形象<br /></>}
          400 * 220
        </div>
        </Col>
      </Row>
    </div>
  </div>
}

export default DecorateInfo;